<template>
  <div class="mid">
    <div class="container">
      <header>
        <div>已存标签</div>
      </header>
      <div class="tags">
        <router-link
          class="tag"
          v-for="(val, index) in tagList.List"
          :key="index"
          :to="`/labels/edit/${val.name}`"
        >
          <span>{{ val.name }}</span>
          <div class="svg-container">
            <span>重新编辑标签</span>
            <svg
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              width="40px"
              height="40px"
              viewBox="0 0 24 24"
              aria-labelledby="chevronsRightIconTitle"
              stroke="#7a7a7a"
              stroke-width="1.2"
              stroke-linecap="square"
              stroke-linejoin="miter"
              fill="none"
              color="#7a7a7a"
            >
              <title id="chevronsRightIconTitle">Chevrons Right</title>
              <polyline points="13 7 18 12 13 17 13 17" />
              <polyline points="7 7 12 12 7 17 7 17" />
            </svg>
          </div>
        </router-link>
        <div class="btn" @click="addLabel"><div>点击添加新标签</div></div>
      </div>
      <MyNav></MyNav>
    </div>
  </div>
</template>

<script setup lang="ts">
import MyNav from "./../components/MyNav.vue";
import { useTagLists } from "./../store/index";
import { reactive } from "vue";

let store = useTagLists();
const tagList = reactive({
  //根据pinia中的tags数组渲染子Tag标签
  List: store.Tags,
});

const addLabel = () => {
  const val = prompt("请输入新标签名称!");
  // 判断输入的内容 输入为空的时候不添加并且给提示信息
  if (val === "") {
    alert("请输入有效的内容.");
  } else {
    // 包括标签名称以及 active的选择样式判别属性
    const currentVal: any = { name: val, active: false };
    // 使用pinia中定义的方法向pinia Tags中添加新的标签
    store.addLabel(currentVal);
  }
};
</script>

<style scoped lang="less">
.mid {
  min-width: 100vw;
  // min-height: 100vh;
  // width: 100vw;
  // height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .container {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    justify-content: flex-start;
    background-color: rgb(243, 243, 243);
    // width: 40vw;
    // width: 100vw;

    height: 100vh;

    header {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      // font-weight: 600;
      height: 6vh;
      line-height: 6vh;
      background-color: rgb(182, 196, 202);
      border-radius: 35px 35px 0px 0px;
    }
    .tags {
      height: 86vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .btn {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          background-color: rgb(92, 82, 82);
          border-radius: 15px;
          font-size: 20px;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          width: 200px;
        }
      }
      .tag {
        padding-left: 30px;
        padding-right: 20px;
        line-height: 60px;
        height: 60px;
        font-size: 20px;
        border-bottom: 1px solid #c2c2c2;
        background-color: rgb(230, 230, 230);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .svg-container {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #625c5c;
        }
      }
    }
  }
}
</style>
